import React, { Component } from 'react'
import { Steps } from 'antd-mobile'
import { NavBar } from 'components'
import { post } from '../../../utils'

const Step = Steps.Step

export default class OrderLogistics extends Component<any, any> {

    public render(): JSX.Element {
        const { expressInfo } = this.props
        return (
            <div className="orderLogistics">
                <NavBar title={<div style={{ fontSize: '0.97rem', color: '#222' }}>订单跟踪</div>} fixed={true} />
                <div className="orderLogistics_topInfo">
                    <p>订单编号: {expressInfo.nu || '暂未发货'}</p>
                    <p>国内承运: {expressInfo.nu || '暂未发货'}</p>
                    <p>预计送达: {expressInfo.nu || '暂未发货'}</p>
                </div>
                <div className="orderLogistics_stepInfo">
                    <Steps current={1}>
                        {
                            expressInfo.data.map((item: any, index: number) => {
                                return (
                                    <Step
                                        key={index}
                                        title={<div className="orderLogistics_stepInfo_title">{item.context}</div>}
                                        icon={<span className={(index === 0) ? 'orderLogistics_stepIcon_active' : 'orderLogistics_stepIcon_default'} />}
                                        description={<div className="orderLogistics_stepInfo_time">{item.time}</div>}
                                    />
                                )
                            })
                        }
                    </Steps>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    private getData() {
        const { userInfo, match, SET_USER_EXPRESSINFO } = this.props
        post('orderapi/orderLogistics', {
            userId: userInfo.id,
            id: match.params.orderId
        }).then((data: any) => {
            if (data.data && data.data.length) {
                SET_USER_EXPRESSINFO(data)
            }
        })
    }
}